<template>
  <el-dialog
    v-el-drag-dialog
    title="钢瓶信息"
    :visible.sync="visible"
    width="700px"
  >
    <el-card v-for="(bottle, index) in chipCodeList" :key="bottle" style="margin-bottom: 10px;">
      <div class="item">
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">钢瓶档案</span>
          <span v-if="isSignOrder" class="title-text">&emsp;{{ index + 1 }}</span>
        </div>
        <el-descriptions size="medium" :column="2">
          <el-descriptions-item label="钢瓶编码">{{ getGasTank(bottle).gpbm }}</el-descriptions-item>
          <el-descriptions-item label="芯片编码">{{ bottle !== '00000000' ? bottle : '【非智能瓶】' }}</el-descriptions-item>
          <el-descriptions-item label="出厂日期">{{ getGasTank(bottle).scrq ? parseTime( getGasTank(bottle).scrq, '{y}/{m}/{d}') : '' }}</el-descriptions-item>
          <el-descriptions-item label="建档日期">{{ getGasTank(bottle).jdsj ? parseTime(getGasTank(bottle).jdsj, '{y}/{m}/{d}') : '' }}</el-descriptions-item>
          <el-descriptions-item label="下次检验">{{ getGasTank(bottle).xcjysj ? parseTime(getGasTank(bottle).xcjysj, '{y}/{m}/{d}') : '' }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions size="medium" :column="2">
          <el-descriptions-item label="镂空码">{{ getGasTank(bottle).unifiedCode }}</el-descriptions-item>
          <el-descriptions-item label="超高频芯片编码">{{ getGasTank(bottle).uhfChip }}</el-descriptions-item>
          <el-descriptions-item label="充装次数">{{ getGasTank(bottle).czcs ? getGasTank(bottle).czcs : 0 }}</el-descriptions-item>
          <el-descriptions-item label="规格型号">{{ getGasTank(bottle).typeName }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="item">
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">最近三次充装记录</span>
        </div>
        <lb-table
          ref="lbTable"
          border
          :column="tableData.column"
          :data="getTableMatch(bottle)"
        />
      </div>
    </el-card>
  </el-dialog>

</template>

<script>
  import { queryBottleChipDetail, queryFleeCylinderChipDetail } from '@/api'
  import { parseTime } from '@/utils/index'

  export default {
    name: 'bottleDetail',
    data() {
      return {
        parseTime,
        visible: false,
        temp: {},
        isSignOrder: false,
        chipCodeList: [],
        fillRecordList: [],
        gasTankList: [],
        tableData: {
          column: [
            {
              prop: 'zdbm',
              label: '充装站'
            },
            {
              prop: 'cjqbm',
              label: '充装工位'
            },
            {
              prop: 'czkssj',
              label: '充装时间',
              width: 110,
              render: (h, { row }) => <span>{ row.czkssj && parseTime(row.czkssj, '{y}-{m}-{d}') }</span>
            },
            {
              prop: 'czyxsj',
              align: 'right',
              label: '充装耗时(秒)'
            },
            {
              prop: 'czjz',
              align: 'right',
              label: '充装净重'
            }
          ]
        }
      }
    },
    methods: {
      open(temp, t, pageName) {
        this.getData(temp, t, pageName)
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          if (temp) {
            this.temp = Object.assign(this.temp, temp)
          }
        })
      },
      async getData(temp, t, name) {
        let params = {
          orderCode: temp.orderCode,
          t: t
        }
        if (['fleeCylinder', 'sleepCylinder'].includes(name)) { // 窜瓶预警异常芯片号、沉睡钢瓶芯片编码
          params = {
            chipCode: temp.chipCode,
            codeType: 1
          }
        }
        const res = ['fleeCylinder', 'sleepCylinder'].includes(name) ? await queryFleeCylinderChipDetail(params) : await queryBottleChipDetail(params)
        this.chipCodeList = res.data.chipCodeList
        this.fillRecordList = res.data.fillRecordList
        this.gasTankList = res.data.gasTankList
        this.isSignOrder = res.data.isSignOrder
      },
      getGasTank(chipCode) {
        const match = this.gasTankList.find(item => item.xpbm === chipCode)
        if (match) return match
        return {}
      },
      getTableMatch(chipCode) {
        const match = this.fillRecordList.filter(item => item.rfidcode === chipCode)
        return match
      }
    }
  }
</script>

<style lang='scss' scoped>
.item {
  margin-bottom: 18px;
  .title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
